<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //传入接口地址和所需的参数
        function formate(url,data){
            //设置默认方式
            var type="GET";
            //判断出请求方式是POST
            if(arguments===1){
                type="POST";
                //补齐参数
                data=url
                url=""
            }
            //假设start是true
            var start=true
            // 遍历参数
            for(var key in data){
                if(type==="GET"){
                    url+=(start?"?":"&")+key+"="+data[key]
                }else if(type==="POST"){
                    url+=(start?"":"&")+key+"="+data[key]
                }
                start =false
            }
            return url
        }

        function ajax(options){
            //设置默认参数
            options=Object.assign({
                //默认方式
                method:"GET",
                //回调函数--响应数据
                callback:function(){},
                //默认接口地址为空
                url:"",
                //默认参数为空
                data:{},
                //参数里回调函数的的名字
                jsonpcallback:"callback",
            },options)
            if(options.method==="jsonp"){
                // jsonp请求
                //创建script
                var script=document.createElement("script");
                //设置script的src
                script.src=formate(options.url,options.data);
                //放好script
                document.body.appendChild(script);
                // 函数里面设置全局变量
                window[options.jsonpcallback]=function(data){
                    //调用jsonp的请求函数
                    options.callback(data)
                }
                //调用完清除掉script标签，避免冗余
                script.onload=function(){
                    script.remove()
                }
            }else{
                var xhr=new XMLHttpRequest()
                xhr.open(options.method,options.method.toUpperCase()==="GET"?formate(options.url,options.data):options.url);
                if(options.method.toUpperCase()==="POST"){
                    xhr.setRequestHeader("content-type","application/x-www/form-urlencoded")
                }
                xhr.send(options.method.toUpperCase()==="POST"?formate(options.url):null)
                xhr.onreadystatechange=function(){
                    if(xhr.readyState===4&&/^2\d{2}/.test(xhr.status)){
                        //返回请求数据
                        options.callback(xhr.responseText)
                    }
                }
            }
        }
        // ?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32218,1425,31672,32139,31254,32045,32230,32299,31639&wd=123&req=2&csor=5&pwd=hell&cb=jQuery110209460874033153552_1594630926712&_=1594630926722
        ajax( { 
                  method : "jsonp" , 
                  url : "https://www.baidu.com/sugrec",
                  data : {
                         pre:1,
                         p:3,
                         ie:"utf-8",
                         json:1,
                         prod:"pc",
                         from:"pc_web",
                         sugsid:"32218,1425,31672,32139,31254,32045,32230,32299,31639",
                         wd:"hello world",
                         req:2,
                         csor:5,
                         cb:"callback",
                         _:Date.now()
                  },
                  jsonpcallback : "callback",
                  callback : function(data){
                        console.log(data);
                  }
            })
    </script>
</body>
</html>